<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .wrap{
        position: fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:url('images/bg03.jpg') center bottom no-repeat;
        overflow:auto;
      }

      .navbar-brand{
        padding:10px 15px;
      }
      .logout {
        font-weight: 900;
        font-size: 20px;
        color: #ff0000;
        text-decoration: none;
      }

      .logout:hover {
        text-decoration: none;
        color: yellowgreen;
      }
      #my-table th {
        text-align: center;
      }
      #my-table td {
        text-align: center;
        line-height:80px;
        padding: 0;
        padding:10px;
      }
      td img {
        width:80px;
        height:80px;
      }
      .username {
        font-weight: 900;
        color: hotpink;
        background-color: yellowgreen;
      }
      .pagination{
         margin:0px;
         padding:0px;
         font-size:0;
         line-height:1;
      }
      .pagination li{
        display:inline-block;
        font-size:14px;
      }
      .mp15{
        margin-top:15px;
      }
      .table{
        margin-bottom:0;
      }
      .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
        border-bottom-width:1px;
      }
      .page-title{
        font-size:16px;
        font-weight:bold;
      }
     
    </style>
  </head>

  <body>
    <div class="wrap">
      <nav class="navbar  navbar-inverse navbar-static-top">
          <div class="container">      
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
            </div>          
          </div>
      </nav>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
              <div class="col-md-6 page-title">英雄列表</div>
              <div class="col-md-6 text-right">当前位置：首页</div>
            </div>
            </div>
            <div class="panel-body">
               <!-- action 不写 就是当前页面 method 不写 就是 get -->
               <div class="row">
                  <div class="col-md-9">
                    <!--<form class="form-inline">
                      <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount"
                          >Amount (in dollars)</label
                        >
                        <div class="input-group">
                          <div class="input-group-addon">英雄姓名</div>
                          <input
                            type="text"
                            value=""
                            class="form-control"
                            name="search"
                            placeholder="请输入查询内容"
                          />
                        </div>
                      </div>
                      <button type="submit" class="btn btn-default">查找</button>
                    
                    </form>-->
                  </div>
                  <div class="col-md-3">
                    <a href="./add.html" class="btn btn-success pull-right">新增</a>                    
                  </div>

                </div>

              <table id="my-table" class="table table-bordered mp15">
                <thead>
                  <tr>
                    <th width="25%">头像</th>
                    <th width="25%">姓名</th>
                    <th width="25%">技能</th>                    
                    <th width="25%">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td><img src="./lib/img/盖伦.png" alt="" /></td>
                    <td>盖伦</td>
                    <td>躲草丛</td>                 
                    <td>
                      <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                      <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                    </td>
                  </tr>
                  <tr>
                    <td><img src="./lib/img/盖伦.png" alt="" /></td>
                    <td>盖伦</td>
                    <td>躲草丛</td>                 
                    <td>
                      <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                      <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                    </td>
                  </tr>
                  
                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
<script src="./lib/js/template-web.js"></script>
<script type="text/html" id="cq">
  {{each data v}}
  <tr>
    <td><img src="{{v.icon}}" alt="" /></td>
    <td>{{v.name}}</td>
    <td>{{v.skill}}</td>
    <td>
      <input type="hidden" id="{{v.id}}">
      <button class="btn btn-primary edit">编辑</button>
      <button class="btn btn-danger delete">删除</button>
    </td>
  </tr>
    {{/each }}
</script>
<script>
  $(function () {
    $.ajax({
      type:'get',
      url:'http://localhost:4399/hero/all',
      success:function (result) {
        let resultCq = template('cq',result);
        $('#my-table tbody').html(resultCq);
      }
    })
    $('#my-table tbody').on('click','.edit',function () {
      let id = $(this).siblings('input').attr('id');
      localStorage.setItem('id',id);
      window.location.href = 'edit.html'
    })
    $('#my-table tbody').on('click','.delete',function () {
      let id = $(this).siblings('input').attr('id');
      if (confirm('确定删除吗?')){
        $.ajax({
          type:'get',
          url:'http://localhost:4399/hero/delete',
          data:{
            id:id
          },
          success:function (result) {
            if (result.code == 204){
              window.location.reload();
            }
          }
        })
      }
    })
  })
</script>
